<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 500px;
            margin: 10px auto;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        table caption {
            margin: 10px 10px 10px 0;
            text-align: left;
        }

        table th,
        table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        button {
            border: none;
            outline: none;
            color: white;
            padding: 2px 5px;
            border-radius: 5px;
        }

        input {
            vertical-align: middle;
        }

        #chkAll,
        .chk {
            background-color: grey;
        }

        #delAll,
        .del {
            background-color: red;
        }

        #add,
        .sticky {
            background-color: blue;
        }
    </style>
</head>

<body>
    <table>
        <caption>
            <h2>出货单</h2>
            <button class="chk"><label class="chk"><input type="checkbox" id="chkAll"> 全选/反选</label></button> <button
                id="delAll">删除选中项</button>
            订单号：<input type="text" id="ord"> <button id="add">添加</button>
        </caption>
        <thead>
            <tr>
                <th>#</th>
                <th>订单号</th>
                <th>日期时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>

<script>
    // 数据列表
    let dataList = [
        { checked: true, orderNo: 'TM0230478296348243', date: '2020.6.14' },
        { checked: true, orderNo: 'JD054646548234', date: '2020.6.14' },
        { checked: false, orderNo: 'JD054633348343', date: '2020.6.14' }
    ];

    // 获取元素
    const chkAll = document.querySelector('#chkAll');
    const delAll = document.querySelector('#delAll');
    const ord = document.querySelector('#ord');
    const add = document.querySelector('#add');
    const tbody = document.querySelector('tbody');

    // 首次渲染
    render(dataList);

    // 渲染表格
    function render(data) {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            arr.push(`<tr data-index="${i}">`);
            checked = data[i].checked ? ' checked' : '';
            arr.push(`<td><input class="check" type="checkbox"${checked}></td>`);
            arr.push(`<td>${data[i].orderNo}</td>`);
            arr.push(`<td>${data[i].date}</td>`);
            arr.push(`<td><button class="sticky">置顶</button> <button class="del">删除</button></td>`);
            arr.push(`</tr>`);
        }
        tbody.innerHTML = arr.join('\n');
    }

    // 1. 添加功能
    add.addEventListener('click', function () {
        if (ord.value.trim() == '') return alert('请输入订单号');
        // 重复验证
        // let check = dataList.filter(el => el.orderNo == ord.value.trim());
        // if (check.length) {
        //     return alert('订单号重复');
        // }
        // 转大写
        let orderNo = ord.value.trim().toUpperCase();
        // 年月日
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let data = { checked: true, orderNo, date: `${y}.${m}.${d}` };
        // 头部入队
        dataList.unshift(data);
        // 清空输入框
        ord.value = '';
        render(dataList);
    });

    // 2. 全选/反选功能
    chkAll.addEventListener('click', function () {
        dataList.map(el => el.checked = chkAll.checked);
        render(dataList);
    });

    // 3. 删除选中项
    delAll.addEventListener('click', function () {
        let check = dataList.filter(el => el.checked == true);
        if (check.length == 0) return alert('未选择数据');
        if (confirm('确认删除选中的行吗？')) {
            dataList = dataList.filter(el => el.checked == false);
            render(dataList);
        }
    });

    // 事件派发
    tbody.addEventListener('click', function (e) {
        let option = e.target.className;
        // 复选框状态
        if (option == 'check') {
            let index = e.target.parentNode.parentNode.dataset.index;
            dataList.map((el, i) => {
                if (i == index) el.checked = !el.checked;
            });
            // 全选状态
            chkAll.checked = dataList.every(el => el.checked);
            render(dataList);
        }
        // 3. 删除选中项
        if (option == 'del') {
            if (confirm('确认删除行吗？')) {
                let index = e.target.parentNode.parentNode.dataset.index;
                dataList = dataList.filter((el, i) => i != index);
                render(dataList);
            }
        }
        // 4.置顶单项
        if (option == 'sticky') {
            let index = e.target.parentNode.parentNode.dataset.index;
            // 查找数据
            let data = dataList.filter((el, i) => i == index).shift();
            // 删除
            dataList.splice(index, 1);
            // 入队
            dataList.unshift(data);
            render(dataList);
        }
    });
</script>

</html>